<template>
  <div class="english-quiz-container">
    <header class="quiz-header">
      <h1>英语单选题练习</h1>
      <p class="quiz-description">请从每题的四个选项中选择最恰当的答案</p>
    </header>

    <main class="quiz-content">
      <!-- 进度指示器 -->
      <div class="progress-container">
        <div class="progress-bar">
          <div 
            class="progress-fill" 
            :style="{ width: `${(currentQuestionIndex + 1) / questions.length * 100}%` }"
          ></div>
        </div>
        <p class="progress-text">
          题目 {{ currentQuestionIndex + 1 }} / {{ questions.length }}
        </p>
      </div>

      <!-- 题目区域 -->
      <div class="question-card">
        <div class="question-header">
          <h2 class="question-text">{{ currentQuestion.question }}</h2>
          <p class="question-points" v-if="showPoints">
            难度: {{ currentQuestion.difficulty }} | 分值: {{ currentQuestion.points }}分
          </p>
        </div>

        <div class="options-container">
          <div 
            v-for="(option, index) in currentQuestion.options" 
            :key="index"
            class="option-item"
            :class="{
              'selected': currentQuestion.userAnswer === index,
              'correct': isSubmitted && index === currentQuestion.correctAnswer,
              'incorrect': isSubmitted && currentQuestion.userAnswer === index && index !== currentQuestion.correctAnswer
            }"
            @click="selectOption(index)"
            :disabled="isSubmitted"
          >
            <span class="option-letter">{{ String.fromCharCode(65 + index) }}</span>
            <span class="option-text">{{ option }}</span>
            
            <span class="option-icon" v-if="isSubmitted">
              <i v-if="index === currentQuestion.correctAnswer" class="icon-correct">✓</i>
              <i v-else-if="currentQuestion.userAnswer === index" class="icon-incorrect">✗</i>
            </span>
          </div>
        </div>

        <!-- 答案解析（提交后显示） -->
        <div v-if="isSubmitted" class="explanation">
          <h3>解析：</h3>
          <p>{{ currentQuestion.explanation }}</p>
        </div>
      </div>

      <!-- 导航按钮 -->
      <div class="navigation-buttons">
        <button 
          class="nav-btn prev-btn"
          @click="prevQuestion"
          :disabled="currentQuestionIndex === 0"
        >
          上一题
        </button>

        <button 
          class="action-btn"
          @click="handleAction"
        >
          {{ isSubmitted ? '下一题' : '提交答案' }}
        </button>

        <button 
          class="nav-btn next-btn"
          @click="nextQuestion"
          :disabled="currentQuestionIndex === questions.length - 1 || !isSubmitted"
        >
          下一题
        </button>
      </div>
    </main>

    <!-- 结果弹窗 -->
    <div v-if="showResult" class="result-modal">
      <div class="modal-content">
        <h2>测验结果</h2>
        <div class="result-score">
          <p>你的得分：</p>
          <p class="score-value">{{ totalScore }} / {{ totalPoints }}</p>
          <p class="score-percentage">{{ Math.round((totalScore / totalPoints) * 100) }}%</p>
        </div>
        
        <div class="result-stats">
          <div class="stat-item">
            <span class="stat-label">总题数：</span>
            <span class="stat-value">{{ questions.length }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">做对：</span>
            <span class="stat-value correct">{{ correctCount }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">做错：</span>
            <span class="stat-value incorrect">{{ incorrectCount }}</span>
          </div>
        </div>
        
        <button class="restart-btn" @click="restartQuiz">
          重新开始
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 题目数据
const questions = ref([
  {
    question: "She ____ to school every day.",
    options: [
      "go",
      "goes",
      "going",
      "is going"
    ],
    correctAnswer: 1,
    userAnswer: null,
    isSubmitted: false,
    difficulty: "简单",
    points: 10,
    explanation: "本题考查一般现在时的第三人称单数形式。主语是第三人称单数 she，动词应加 s，故选 goes。"
  },
  {
    question: "I ____ dinner when the phone rang.",
    options: [
      "had",
      "have had",
      "was having",
      "have"
    ],
    correctAnswer: 2,
    userAnswer: null,
    isSubmitted: false,
    difficulty: "中等",
    points: 15,
    explanation: "本题考查过去进行时。句意为'电话响时我正在吃晚饭'，表示过去某个时间点正在进行的动作，故选 was having。"
  },
  {
    question: "If it ____ tomorrow, we will stay at home.",
    options: [
      "rain",
      "rains",
      "will rain",
      "rained"
    ],
    correctAnswer: 1,
    userAnswer: null,
    isSubmitted: false,
    difficulty: "中等",
    points: 15,
    explanation: "本题考查 if 引导的条件状语从句。主句用一般将来时，从句用一般现在时表将来，故选 rains。"
  },
  {
    question: "This is the book ____ I told you about.",
    options: [
      "which",
      "what",
      "whose",
      "who"
    ],
    correctAnswer: 0,
    userAnswer: null,
    isSubmitted: false,
    difficulty: "中等",
    points: 15,
    explanation: "本题考查定语从句的关系代词。先行词是物（book），关系代词在从句中作宾语，故选 which。"
  },
  {
    question: "She speaks English ____ than her brother.",
    options: [
      "good",
      "well",
      "better",
      "best"
    ],
    correctAnswer: 2,
    userAnswer: null,
    isSubmitted: false,
    difficulty: "简单",
    points: 10,
    explanation: "本题考查副词的比较级。句中有 than，应用比较级形式，well 的比较级是 better，故选 better。"
  }
]);

// 状态管理
const currentQuestionIndex = ref(0);
const showResult = ref(false);
const showPoints = ref(true);

// 计算属性
const currentQuestion = computed(() => {
  return questions.value[currentQuestionIndex.value];
});

const isSubmitted = computed(() => {
  return currentQuestion.value.isSubmitted;
});

const totalPoints = computed(() => {
  return questions.value.reduce((sum, question) => sum + question.points, 0);
});

const totalScore = computed(() => {
  return questions.value.reduce((sum, question) => {
    if (question.userAnswer === question.correctAnswer) {
      return sum + question.points;
    }
    return sum;
  }, 0);
});

const correctCount = computed(() => {
  return questions.value.filter(q => q.userAnswer === q.correctAnswer).length;
});

const incorrectCount = computed(() => {
  return questions.value.filter(q => q.userAnswer !== null && q.userAnswer !== q.correctAnswer).length;
});

// 方法
const selectOption = (index) => {
  if (!currentQuestion.value.isSubmitted) {
    currentQuestion.value.userAnswer = index;
  }
};

const handleAction = () => {
  if (!currentQuestion.value.isSubmitted) {
    // 提交当前答案
    if (currentQuestion.value.userAnswer === null) {
      alert("请选择一个答案");
      return;
    }
    currentQuestion.value.isSubmitted = true;
    
    // 如果是最后一题，提交后显示结果
    if (currentQuestionIndex.value === questions.length - 1) {
      setTimeout(() => {
        showResult.value = true;
      }, 1000);
    }
  } else {
    // 已提交则进入下一题
    nextQuestion();
  }
};

const prevQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--;
  }
};

const nextQuestion = () => {
  if (currentQuestionIndex.value < questions.length - 1) {
    currentQuestionIndex.value++;
  }
};

const restartQuiz = () => {
  // 重置所有题目状态
  questions.value.forEach(question => {
    question.userAnswer = null;
    question.isSubmitted = false;
  });
  
  // 重置页面状态
  currentQuestionIndex.value = 0;
  showResult.value = false;
};
</script>

<style scoped>
.english-quiz-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  color: #333;
  line-height: 1.6;
}

.quiz-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #3498db;
}

.quiz-header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.quiz-description {
  color: #666;
  font-size: 16px;
}

/* 进度指示器 */
.progress-container {
  margin-bottom: 30px;
}

.progress-bar {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background-color: #3498db;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: right;
  color: #666;
  font-size: 14px;
}

/* 题目卡片 */
.question-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
}

.question-header {
  margin-bottom: 25px;
}

.question-text {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 10px;
  line-height: 1.8;
}

.question-points {
  color: #7f8c8d;
  font-size: 14px;
  font-style: italic;
}

/* 选项样式 */
.options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 25px;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.option-item:hover:not(:disabled) {
  background-color: #f1f5f9;
  transform: translateY(-2px);
}

.option-item:disabled {
  cursor: default;
}

.option-item.selected {
  border-color: #3498db;
  background-color: #ebf5fb;
}

.option-item.correct {
  border-color: #2ecc71;
  background-color: #eafaf1;
}

.option-item.incorrect {
  border-color: #e74c3c;
  background-color: #fdedeb;
}

.option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #3498db;
  color: white;
  border-radius: 50%;
  margin-right: 15px;
  font-weight: bold;
}

.option-item.correct .option-letter {
  background-color: #2ecc71;
}

.option-item.incorrect .option-letter {
  background-color: #e74c3c;
}

.option-text {
  flex: 1;
  font-size: 16px;
}

.option-icon {
  margin-left: 10px;
  font-size: 20px;
}

.icon-correct {
  color: #2ecc71;
}

.icon-incorrect {
  color: #e74c3c;
}

/* 解析 */
.explanation {
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #3498db;
  margin-top: 20px;
}

.explanation h3 {
  margin-top: 0;
  color: #2980b9;
  font-size: 16px;
  margin-bottom: 8px;
}

.explanation p {
  margin: 0;
  color: #555;
  font-size: 15px;
}

/* 导航按钮 */
.navigation-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.nav-btn, .action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-btn {
  background-color: #f1f5f9;
  color: #333;
}

.nav-btn:hover:not(:disabled) {
  background-color: #e2e8f0;
}

.nav-btn:disabled {
  background-color: #f8f9fa;
  color: #b0b0b0;
  cursor: not-allowed;
}

.prev-btn {
  order: 1;
}

.next-btn {
  order: 3;
}

.action-btn {
  background-color: #3498db;
  color: white;
  font-weight: bold;
  padding: 12px 30px;
  order: 2;
}

.action-btn:hover:not(:disabled) {
  background-color: #2980b9;
  transform: translateY(-2px);
}

/* 结果弹窗 */
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  width: 100%;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 25px;
}

.result-score {
  margin-bottom: 30px;
}

.result-score p {
  margin: 0 0 10px 0;
  color: #666;
}

.score-value {
  font-size: 36px;
  font-weight: bold;
  color: #3498db;
  margin: 10px 0;
}

.score-percentage {
  font-size: 24px;
  color: #2ecc71;
  margin-bottom: 20px;
}

.result-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
  padding: 0 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 5px;
}

.stat-value {
  font-weight: bold;
  font-size: 18px;
}

.stat-value.correct {
  color: #2ecc71;
}

.stat-value.incorrect {
  color: #e74c3c;
}

.restart-btn {
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.restart-btn:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
}

/* 页脚 */
.quiz-footer {
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .question-card {
    padding: 20px 15px;
  }
  
  .question-text {
    font-size: 18px;
  }
  
  .option-item {
    padding: 12px 15px;
  }
  
  .navigation-buttons {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .prev-btn, .next-btn, .action-btn {
    width: 100%;
    order: unset;
  }
  
  .action-btn {
    order: -1;
  }
}
</style>
    